.main-screen {
  height: 100%;
  position: relative;

  > * {
    box-sizing: border-box;
    height: 100%;
  }

  > .main {
    margin-left: $sidebar-width;
    padding: {
      bottom: $sidebar-footer-height;
    };
    overflow-y: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    .window-tabs {
      display: flex;
      background: rgba(#000, 0.1);
      border-bottom: 1px solid #c3c3c3;

      @include children-inline;

      > * {
        width: 150px;
        max-width: 100%;
        text-align: center;
        border-right: 1px solid #c3c3c3;

        @include system-text;

        &:hover {
          background: rgba(100, 120, 155, 0.15);
        }

        &.active {
          background: rgba(93, 99, 107, 0.19); // rgba(69, 92, 130, 0.19);
        }
      }
    }

    .window-content {
      display: none;
      overflow: auto;
      // use grey background in next release, make it same as mac apps
      //background: #edecec;

      &.active {
        display: block;
        height: calc(100% - 20px);
      }

      &.structure.active, &.procedures.active, &.info.active, &.extensions.active, &.query.active {
        margin-bottom: -27px;
        height: calc(100% + 7px);
      }
    }
  }
}

.window-tab {
  float: left;
}

body.sidebar-resizing {
  cursor: ew-resize;

  * {
    @include unselectable;
  }
}
